import Nav from "./Nav/Nav";
import "./App.css";
import Banner from "./Banner/Banner";
import Main from "./Main/Main";
import axios from "axios";
import { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import MainSearch from "./Main/MainSearch";
function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    axios
      .get("https://api.mocksys.com/api/v1/mock/20072/get/nanamichiaki")
      .then((response) => {
        setData(response.data.array);
      });
  }, []);
  //存放满足搜索的数据
  const [keyTrue, setKeyTrue] = useState("");
  function filterKey(key) {
    let keyTrue = data.filter(
      data.map((item) => {
        return item.title.indexOf(key)!==-1;
      })
    );
    setKeyTrue(keyTrue);
  }

  return (
    <div className="App">
      <Nav></Nav>
      <Banner data={data}></Banner>

      <Routes>
        <Route path="/" element={<Main data={data} />} />
        <Route path="/:query" element={<MainSearch filterKey={filterKey} data={data}/>} />
      </Routes>
    </div>
  );
}

export default App;
